<template>
  <div class="page-addEmploy">
    <div class="a-ad">
      <img v-bind:src="adImg" />
    </div>
    <div class="addEmploy-box">
      <div class="a-input-box">
        <div class="a-input">
          <label>姓名</label>
          <input type="text" placeholder="请输入您的姓名"  v-model="uname"  />
        </div>

        <div class="a-input">
          <label>手机</label>
          <input type="number" placeholder="请输入您的手机号码" @input="change"  v-model="phone" pattern="[0-9]*" />
        </div>
        <div class="a-input a-code">
          <label>验证码</label>
          <input type="number" placeholder="请输入验证码"  v-model="verifyCode" pattern="[0-9]*" />
          <div @click="SendTelCode" class="a-code-btn" v-bind:class="{'item-countdown-none':!ucodeBtnFlag}" >{{ucodeBtnTxt}}</div>
        </div>
      </div>

      <div class="a-btn">
        <div v-if="!phone" class="btn-default">提交</div>
        <div v-else @click="submit" class="btn-primary">提交</div>
      </div>
      <p class="a-sugger">我已认真阅读并同意<i>《驴师傅智能充电站用户注册协议》</i></p>
    </div>
  </div>
</template>



<style lang="less" scoped>
.page-addEmploy {
  position: relative;
  width: 100%;
  height: 100%;
  // background: url("https://img-hxy021.didistatic.com/static/ghoneycomb/hc_9aa903ccc3495b804673ed213f29d6c1")
  //   0 0 no-repeat;
  // background-size: 750px auto;
  box-sizing: border-box;
  .a-ad {
    width: 100%;
    img {
      max-width: 100%;
    }
  }
}

.addEmploy-box {
  width: 100%;
  box-sizing: border-box;
  padding: 50px;
  .a-input-box {
    border: 2px solid #2992ed;
    border-radius: 8px;

    .a-input {
      height: 100px;
      display: -webkit-box;
      border-bottom: 1px solid #2992ed;
      &:last-child {
        border: none;
      }
      label {
        display: block;
        max-width: 150px;
        width: 150px;
        text-align: center;
        line-height: 100px;
      }
      input {
        width: 100%;
        height: 95%;
        box-sizing: border-box;
        margin: 0;
        padding: 0 0 0 20px;
        font-size: 26px;
      }
    }

    .a-code {
      position: relative;
      width: 100%;
      display: -webkit-box;

      .a-code-btn {
        position: absolute;
        right: -1px;
        top: 10px;
        width: 200px;
        height: 80px;
        line-height: 82px;
        border-radius: 0 8px 8px 0;
        border-left: 1px solid #2992ed;
        font-size: 24px;
        text-align: center;
        color: #2992ed;
        &.item-countdown-none {
          color: #2992ed;
        }
      }

      input {
        display: block;
        width: 300px;
      }
    }
  }
}

.a-btn {
  margin: 30px auto;
  height: 80px;
  box-sizing: border-box;
  width: 100%;
  background: #fcfbfb;
  .btn-primary {
    text-align: center;
    background: #2992ed;
    color: #fff;
    font-size: 28px;
    width: 100%;
    height: 100%;
    line-height: 80px;
    border-radius: 40px;
  }
  .btn-default {
    text-align: center;
    background: rgb(229, 229, 229);
    color: #fff;
    font-size: 28px;
    width: 100%;
    height: 100%;
    line-height: 80px;
    border-radius: 40px;
  }
}
.a-sugger {
  color: #999;
  font-size: 24px;
  text-align: center;
  display: block;
  i {
    font-style: normal;
    color: #2992ed;
  }
}
</style>


<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      adImg: require("../public/imgs/img-ad.jpg"),
      uname: "",
      counttime: 60,
      phone: "",
      verifyCode: "",
      inviteCode: "",
      ucodeBtnTxt: "获取验证码",
      sendCodeFlag: false,
      ucodeBtnFlag: true,
      countdownfn: null
    };
  },
  mounted() {
    var query = this.$route.query;

    if (query.inviteCode) {
      this.inviteCode = query.inviteCode;
    }
  },
  methods: {
    submit() {
      var self = this;

      if (this.uname == "") {
        this.Toast("请先输入您的姓名");
        return false;
      }

      var myreg = /^(((1[0-9][0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
      if (!myreg.test(self.phone)) {
        this.Toast("请输入正确的联系人手机");
        return false;
      }

      if (!this.sendCodeFlag) {
        this.Toast("请先获取手机验证码");
        return false;
      }

      if (this.verifyCode == "" || this.verifyCode.length != 4) {
        this.Toast("请输入正确的验证码");
        return false;
      }

      // 定义请求
      var req = this.Axios.post(this.Interface.AddEmploy, {
        uname: self.uname,
        code: self.inviteCode, // 邀请码
        phone: self.phone, // 手机号码
        verifyCode: self.verifyCode //手机验证码
      });

      // 执行请求
      req.then(res => {
        var data = res.data;
        if (data.ok) {
          this.Toast("接受邀请成功");
          setTimeout(function() {
            console.log(1);
          }, 1000);
        } else {
          this.Toast(data.msg);
        }
      });
    },
    change() {
      var evt = arguments[0];
      var val = evt.target.value;
      if (val.length >= 11) {
        // self.phone = evt.target.value = 1;
        // evt.target.value = 1;
      }
    },
    // 发送手机验证码
    SendTelCode() {
      var self = this;
      var myreg = /^(((1[0-9][0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
      if (!myreg.test(self.phone)) {
        this.Toast("请输入正确的手机号码");
        return false;
      }
      if (this.ucodeBtnFlag) {
        // 定义请求
        var req = this.Axios.post(this.Interface.GetVerifyCode, {
          phone: self.phone
        });

        //处理返回的结果
        req.then(res => {
          var data = res.data;
          if (data.ok) {
            this.ucodeBtnFlag = false;
            this.sendCodeFlag = true;
            this.countdown();
            this.Toast("发送成功");
          }
        });
      }
    },
    countdown() {
      var time = arguments[0] | this.counttime;
      var self = this;
      if (this.counttime == 0) {
        this.ucodeBtnTxt = "获取验证码";
        this.ucodeBtnFlag = true;
        clearTimeout(self.countdownfn);
        return false;
      }
      this.ucodeBtnTxt = this.counttime + "秒";
      this.counttime = --this.counttime;

      if (self.countdownfn) clearTimeout(self.countdownfn);
      self.countdownfn = setTimeout(function() {
        console.log(self.counttime);
        self.countdown(self.counttime);
      }, 1000);
    }
  }
};
</script>
